<html>

<div class="container-fluid">

	<div class="row-fluid">   
                <div class="">
	 	<span class="label label-info" style="margin-top:15px; margin-bottom:15px; margin-left:500px">
		<% if @story.title.nil? %>
		<%= " the story has no title" %>
		<% else %>		
		Story:  <%= @story.title %></h2>
		<%end%>
		</span>
		</div>
        	</br></br>
		<div>
		<span class="label label-info" style="margin-top:15px; margin-bottom:15px; margin-left:425px">
                <% if (@story.media_link!= "" && @story.media_link != nil)%>
                <a href=""><img src="<%= @story.media_link%>" margin-left=20px margin-top=100px></a>
                <%else%>
                 <%= "Sorry,there is no media related to this story!" %>
                <%end%>
		</span>		
		</div>
	


		<div class="accordion" id="a1">
		<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#a1" href="#c1">
			<h3 class="statistics-component-text"> Content:: </h3>
			</a>
		</div>
		<div id="c1" class="accordion-body collapse" style= "margin-left: 20px;">
		<% if @story.content.nil? %>
		<%= " there is no available content for this story!" %>
		<%else%>
		<%= @story.content %>
		<%end%>
		</div>
		</div>

		<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#a1" href="#c2">
			<h3 class="statistics-component-text"> Status:: </h3>
			</a>
		</div>
		<div id="c2" class="accordion-body collapse" style= "margin-left: 20px;">
		<% if @likes.length == 0 %>
		<%= "no-one liked this story yet!!" %>
		<%else%>
		<%= @likes.length %> User Liked this Story
		<%end%>
		</br>
		<% if @dislikes.length == 0 %>
		<%= "no-one disliked this story yet!!" %>
		<%else%>
		<%= @dislikes.length %> User disLiked this Story
		<%end%>
		
		</div>
		</div>

		<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#a1" href="#c3">
			<h3 class="statistics-component-text"> Comments:: </h3>
			</a>
		</div>
		<div id="c3" class="accordion-body collapse" style= "margin-left: 20px;">
			<%if @comments.length == 0 %>
			<%= "no-one commented on this story yet!" %>
			<%else%>
			<% @comments.each do |n| %>
			<%= User.find(n.user_id).email%> commented:
			</br>
			<%= n.content %>
			<%end%>
			<%end%> 
		
		</div>
		</div>
		


</div>
</div>
</html>
